<script setup lang="ts">
import type { DepartmentClassRespVO, DepartmentInfoRespVO } from '@/api/department-class';
import { ref } from 'vue';
import { DepartmentClassApi } from '@/api/department-class';
import Empty from '@/components/empty/index.vue';
import { useRequest } from '@/hooks/useRequest';
import { buildAssetSource } from '@/utils';
import { isEmpty } from '@/utils/is.utils';

const emit = defineEmits<{
  close: []
  next: [DepartmentInfoRespVO]
}>();

const show = ref(false);

// 上级科室
const parentSection = ref<DepartmentClassRespVO>();

const {
  data: subSectionList,
  runAsync: getSecondLevelDepartmentList
}
= useRequest(
  () => DepartmentClassApi.getSecondLevelDepartmentList(parentSection.value.id),
  {
    manual: true,
    onBeforeRequest() {
      uni.showLoading({
        mask: true
      });
    },
    onComplete() {
      uni.hideLoading();
    }
  }
);

function handleClose() {
  show.value = false;
  selectedSubSection.value = undefined;
  emit('close');
}

const selectedSubSection = ref<DepartmentInfoRespVO>();
function onSelectSubSection(item: DepartmentInfoRespVO) {
  selectedSubSection.value = item;
}

function handleNext() {
  emit('next', selectedSubSection.value);
  handleClose();
}

defineExpose({
  onOpenSubSectionList(section: DepartmentClassRespVO) {
    subSectionList.value = [];
    parentSection.value = section;
    getSecondLevelDepartmentList();
    show.value = true;
  }
});
</script>

<template>
  <view v-if="show" class="popup-overlay">
    <view class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__title">
          选择二级科室
        </view>
        <view class="app-popup__desc">
          请选择{{ parentSection?.name }}的二级科室
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <wd-row :gutter="30">
          <wd-col v-for="item in subSectionList" :key="item.id" :span="6" @click="onSelectSubSection(item)">
            <view class="sub-section" :class="{ 'sub-section--selected': selectedSubSection?.id === item.id }">
              {{ item.departName }}
            </view>
          </wd-col>
        </wd-row>
        <Empty v-if="isEmpty(subSectionList)">
          <template #empty-text>
            暂无二级科室
          </template>
        </Empty>
      </view>
      <view v-if="!isEmpty(subSectionList)" class="app-popup__footer mt-50 flex-center">
        <view class="next-btn w-435">
          <wd-button block :disabled="!selectedSubSection" @click="handleNext">
            下一步
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup-overlay {
  @apply flex-center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.app-popup {
  width: 886px;
  background: #fff;
  padding-bottom: 50px;
  border-radius: 20px;

  .app-popup__hd {
    position: relative;
    padding-left: 46px;
    padding-top: 56px;

    .app-popup__title {
      font-size: 54px;
      font-weight: bold;

      color: #333333;
    }
    .app-popup__desc {
      font-size: 24.25px;
      color: var(--secondary-text-color);
      margin-top: 20px;
    }
    .app-popup__close {
      position: absolute;
      top: 45px;
      right: 64px;
    }
  }

  .app-popup__content {
    padding: 0 20px;
    margin-top: 50px;
    min-height: 340px;

    .sub-section {
      @apply flex-center;
      font-size: 26px;
      color: #4a4a4a;
      background: #e9f0fe;
      border-radius: 10px;
      height: 75px;
      margin-top: 20px;
      &.sub-section--selected {
        background: var(--primary);
        color: #fff;
        font-weight: bold;
      }
    }
  }

  .next-btn {
    --wot-button-medium-height: 89px;
    --wot-button-medium-fs: 36px;
    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
